<template>
  <view class="content">
    <view class="mainBg"></view>
    <view class="main-head">
      <image
        class="titleText"
        src="/static/images/newIndex/mytitle.png"
      ></image>
    </view>
    <view style="padding: 20rpx" v-if="!isLogin()">
      <view class="tui-avatar">
        <image class="tui-logo" src="/static/logo.png"></image>
        <text class="tui-login" @click="doLogin">点击登录</text>
      </view>
      <tui-form-button class="foot-ope" @click="doLogin()" radius="50rpx" background="#5677FC"
        >登录</tui-form-button
      >
    </view>
    <view style="padding: 20rpx" v-if="isLogin()">
      <view class="tui-avatar">
        <image class="tui-logo" :src="userInfo.avatar"></image>
        <text class="tui-login" @click="doLogin"
          >您好{{ userInfo.username }}，欢迎您！</text
        >
      </view>
      
      <!-- 个人信息维护入口 -->
      <view class="menu-list">
        <view class="menu-item" @click="goToProfile">
          <view class="menu-item-left">
            <image class="menu-icon" src="/static/images/my/profile.png"></image>
            <text class="menu-text">个人信息维护</text>
          </view>
          <image class="menu-arrow" src="/static/images/my/arrow-right.png"></image>
        </view>
      </view>
      
      <tui-form-button
        class="foot-ope"
        @click="logout()"
        radius="20rpx"
        background="rgba(255, 76, 76, 1)"
        >退出登录</tui-form-button
      >
    </view>
  </view>
</template>

<script>
import { isLogin } from "@/common/util.js";
import config from "@/common/config.js";

export default {
  data() {
    return {
      userInfo: {},
    };
  },
  onLoad() {
    this.http
      .get("/api/admin/getInfo")
      .then((res) => {
        this.userInfo = res.data.data;
        this.userInfo.avatar = config.baseUrl + "/" + this.userInfo.avatar;
      })
      .catch((err) => {});
  },
  methods: {
    isLogin() {
      return isLogin();
    },
    doLogin() {
      uni.navigateTo({
        url: "/pages/my/login",
      });
    },
    goToProfile() {
      uni.navigateTo({
        url: "/pages/my/profile",
      });
    },
    logout() {
      uni.removeStorageSync("thorui_token");
      uni.reLaunch({
        url: "/pages/my/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tui-avatar {
  display: flex;
  align-items: center;
  gap: 30rpx;
}
.tui-logo {
  height: 116rpx;
  width: 116rpx;
  border-radius: 10%;
  padding-left: 20rpx;
}
.tui-login {
  flex: 1;
  font-weight: 500;
  font-size: 34rpx;
  color: #ffffff;
  position: relative;
  z-index: 2;
}
.content {
  position: relative;
  padding-top: 90rpx;
  z-index: 10;
  height: calc(100vh - 200rpx);
  overflow: hidden;
  background: #fff;
}
page{
  background: #fff;
}
.main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 40rpx;
  margin: 0 40rpx 25rpx;
}
.titleText {
  width: 80rpx;
  height: 44rpx;
}
.mainBg {
  background-image: url("/static/images/newIndex/my_bg.png") !important;
  background-size: 100% 100%;
  width: 100%;
  height: 692rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.foot-ope {
  width: 90% !important;
  position: fixed;
  bottom: calc(120rpx + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
}

.menu-list {
  margin-top: 40rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 0 30rpx;
  position: relative;
  z-index: 10;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0;
  border-bottom: 1rpx solid rgba(245, 245, 245, 0.8);
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.menu-icon {
  width: 40rpx;
  height: 40rpx;
}

.menu-text {
  font-size: 32rpx;
  color: #6190e1;
  font-weight: 500;
}

.menu-arrow {
  width: 40rpx;
  height: 40rpx;
}
</style>
